<template>
  <div class="searchOut">
    <div class="head">
      项目管理
      <span class="addProject" @click="addProject()">添加项目</span>
    </div>
    <div class="search">
      <label class="projectName">
        <span>项目名称</span>
        <el-input
          type="text"
          placeholder="请输入"
          v-model="$store.state.project.projectSearchDTO.projectName"
          clearable
        ></el-input>
      </label>
      <label class="consUnit">
        <span>施工单位</span>
        <el-select v-model="$store.state.project.projectSearchDTO.consUnit" clearable>
          <el-option
            v-for="item in consUnitList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </label>
      <label class="area">
        <span>地区（市）</span>
        <el-select
          v-model="province"
          clearable
          class="province"
          @change="selectProvince"
          placeholder="请选择省份"
        >
          <el-option
            v-for="item in provinces"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <el-select
          v-model="$store.state.project.projectSearchDTO.area"
          clearable
          class="city"
          placeholder="请选择城市"
        >
          <el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </label>
      <label class="projectCompletion">
        <span>项目状态</span>
        <el-select
          v-model="$store.state.project.projectSearchDTO.projectCompletion"
          clearable
          class="proCompletion"
          placeholder="全部"
        >
          <el-option
            v-for="item in projectCompletionList"
            :key="item.code"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </label>
      <label class="projectId">
        <span>项目编号</span>
        <el-input
          type="text"
          placeholder="请输入"
          v-model="$store.state.project.projectSearchDTO.projectId"
          clearable
        ></el-input>
      </label>
      <label class="datePicker">
        <span>创建时间</span>
        <el-date-picker
          v-model="$store.state.project.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </label>

      <label class="btns">
        <button class="searchBtn" @click="getProjectList">查询</button>
        <button class="resetBtn" @click="reset">重置</button>
      </label>
    </div>
  </div>
</template>

<script>

import provinces from '../../../json/provinces.json'
import cityList from '../../../json/cities.json'
import { removeProjectId, getProjectId } from '../../../utils/projectId'
import { pickerOptions } from '../../../settings'

export default {
  data () {
    return {
      // 施工单位列表
      consUnitList: [],
      // 选中的省级区划
      province: '',
      // 选中的省级区划名字
      provinceName: '',
      // 省级列表
      provinces,
      // 城市列表
      cities: [],
      // 项目状态列表
      projectCompletionList: [
        { label: '监测中', code: 0 },
        { label: '未监测', code: 1 },
        { label: '监测完成', code: 2 }
      ],
      // 日期配置
      pickerOptions
    }
  },
  methods: {
    addProject () {
      if (getProjectId()) {
        removeProjectId()
      }
      this.$router.push('/addProject')
    },
    // 获取施工单位列表
    async getConsUnitList () {
      await this.$store.dispatch('project/getConsUnit').then(res => {
        if (res.data.data) {
          res.data.data.forEach((item, index) => {
            this.consUnitList.push({
              value: index,
              label: item
            })
          })
        }
      })
    },
    // 省级行政区划发生变化时 触发市级区划列表变化
    selectProvince (val) {
      this.$store.state.project.projectSearchDTO.area = ''
      if (val) {
        this.provinceName = this.provinces.filter(item => item.code === val)[0].name
      } else {
        this.provinceName = ''
      }
      this.$store.commit('project/set_projectSearchDTO_province', this.provinceName)
      this.cities = cityList.filter(item => item.provinceCode === val)
    },
    // 获取项目列表
    getProjectList () {
      this.$store.dispatch('project/getList')
      this.$store.dispatch('project/getCount')
    },
    // 重置查询条件
    reset () {
      this.province = ''
      this.$store.dispatch('project/reset')
      this.$store.dispatch('project/getCount')
      // this.getProjectList()
    }
  },
  created () {
    // this.$store.dispatch('project/reset')
    this.province = ''
    this.getConsUnitList()
    this.$store.dispatch('project/getCount')
    // this.getProjectList()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 36px;
}

::v-deep .el-range-separator {
  width: 10%;
}

.head {
    height: 90px;
    line-height: 90px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    .addProject {
      width: 108px;
      height: 42px;
      background-color: #4868FF;
      position: absolute;
      line-height: 42px;
      text-align: center;
      font-size: 16px;
      font-weight: normal;
      color: #fff;
      border-radius: 21px;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      cursor: pointer;
    }
  }
.search {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 24px;
  padding-bottom: 4px;
  font-size: 14px;
  color: #666666;

  label {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 60px;
    vertical-align: middle;

    .el-input {
      padding-left: 12px;
    }
  }
  .projectName {
    .el-input {
      width: 252px;
    }
  }
  .consUnit {
    .el-select {
      width: 240px;
      margin-left: 12px;
    }
  }

  .area {
    .province {
      width: 160px;
    }

    .city {
      width: 160px;
      margin-left: 10px;
    }
  }

  .projectCompletion {
    .proCompletion {
      width: 240px;
      margin-left: 12px;
    }
  }

  .projectId {
    .el-input {
      width: 252px;
    }
  }

  .datePicker {
    margin-right: 30px;
    .el-date-editor {
      margin-left: 12px;
    }
  }

  .btns {
    button {
      width: 84px;
      height: 36px;
      border-radius: 18px;
      border: none;
      cursor: pointer;
    }
    .searchBtn {
      background-color: #4868ff;
      color: #fff;
      margin-right: 16px;
    }
    .resetBtn {
      border: 1px solid #4868ff;
      background-color: transparent;
      color: #4868ff;
    }
  }
}
</style>
